<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			select{
				width: 130px;
			}
		</style>
		<script src="js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var arr = [];
				$.ajax({
					type:"get",
					url:"js/address.json",
					async:true,
					success:function(res){
						arr = res;
						$(res).each(function(idx,item){
							var option = $("<option></option>");
							option.html(item.name);
							option.appendTo($(".s1"));
						})
						$(res[0].children).each(function(idx,item){
							var option = $("<option></option>");
							option.html(item.name);
							option.appendTo($(".s2"));
						})
						$(res[0].children[0].children).each(function(idx,item){
							var option = $("<option></option>");
							option.html(item.name);
							option.appendTo($(".s3"));
						})
						$(res[0].children[0].children[0].children).each(function(idx,item){
							var option = $("<option></option>");
							option.html(item.name);
							option.appendTo($(".s4"));
						})
					}
				});
				//切换省份
				var province = "北京市";
				var city = "市辖区";
				var district = "东城区";
				$(".s1").change(function(){		
					province = $(this).val();
					$(".s2").html("");
					$(".s3").html("");
					$(".s4").html("");
					$.ajax({
						type:"get",
						url:"js/address.json",
						async:true,
						success:function(res){
							$(res).each(function(idx,item){
								if(item.name==province){
									city = item.children[0].name;
									$(item.children).each(function(idx,item){
										var option = $("<option></option>");
										option.html(item.name);
										option.appendTo($(".s2"));
									})
									$(item.children[0].children).each(function(idx,item){
										var option = $("<option></option>");
										option.html(item.name);
										option.appendTo($(".s3"));
									})
									$(item.children[0].children[0].children).each(function(idx,item){
										var option = $("<option></option>");
										option.html(item.name);
										option.appendTo($(".s4"));
									})
								}
							})
						}
					});
				})
				//切换城市
				
				$(".s2").change(function(){		
					city = $(this).val();
					$(".s3").html("");
					$(".s4").html("");
					$(arr).each(function(idx,item){
						if(item.name==province){
							console.log(item);
							$(item.children).each(function(idx,item){
								district = item.children[0].name;
								if(item.name == city){
									$(item.children).each(function(idx,item){
										var option = $("<option></option>");
										option.html(item.name);
										option.appendTo($(".s3"));
									})
									$(item.children[0].children).each(function(idx,item){
										var option = $("<option></option>");
										option.html(item.name);
										option.appendTo($(".s4"));
									})
								}
							})
						}
					})							
				})
				//切换区
				
				$(".s3").change(function(){		
					district = $(this).val();
					$(".s4").html("");
					$(arr).each(function(idx,item){
						if(item.name==province){
							$(item.children).each(function(idx,item){
								if(item.name == city){
									console.log(item);
									$(item.children).each(function(idx,item){
										if(item.name == district){			
											$(item.children).each(function(idx,item){
												var option = $("<option></option>");
												option.html(item.name);
												option.appendTo($(".s4"));
											})
										}
									})
								}
							})
						}
					})							
				})
			})
		</script>
	</head>
	<body>
		请选择省份：
		<select class="s1"></select>
		请选择城市：
		<select class="s2"></select>
		请选择区/县：
		<select class="s3"></select>
		请选择乡镇或街道：
		<select class="s4"></select>
	</body>
</html>
